<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!--    导入BootStrap的css文件-->
    <link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap3/css/bootoast.css">
    <!--    导入jquery-->
    <script src="bootstrap3/jquery.js" type="text/javascript" charset="utf-8"></script>
    <!--    导入bootstrap中的js文件-->
    <script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap3/js/bootoast.js" type="text/javascript" charset="utf-8"></script>
    <style>
        form{
            margin-top: 150px;
        }
        .text-left{
            margin-top: 40px;
        }
    </style>
    <script>
        $(function (){
            $('#btnBook').click(function (){
                if ($('#bookType').val()=='') {
                    bootoast({
                        message:'类型不能为空',
                        type:'danger',
                        position:'top',
                        timeout:2
                    });
                }else {
                    $.ajax({
                        url: 'add_type',
                        type: 'post',
                        cache: false,
                        data: {
                            typeName: $('#bookType').val(),
                            typeDepict: $('#bookDescribe').val()
                        },
                        dataType: 'json',
                        success: function (rst) {
                            if (rst.code == -1) {
                                bootoast({
                                    message: rst.msg,
                                    type: 'danger',
                                    position: 'top',
                                    timeout: 2
                                });
                            } else {
                                bootoast({
                                    message: rst.msg,
                                    type: 'success',
                                    position: 'top',
                                    timeout: 2
                                });
                                $('#bookType').val(''),
                                    $('#bookDescribe').val('')
                            }
                        },
                    });
                }
            });
        });
    </script>
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <ul class="breadcrumb">
            <li><a href="922welcome.html">首页</a></li>
            <li><a href="#">狗熊岭图书类型管理</a></li>
            <li>添加图书类型</li>
        </ul>
        <div class="col-sm-4 col-sm-offset-4 ">
<!--            垂直表单-->
            <form class="text-center">
                <div class="form-group text-left" >
                    <label for="bookType">图书类型:</label>
                    <input type="text" id="bookType" class="form-control">
                </div>
                <div class="form-group text-left">
                    <label for="bookDescribe">详细描述:</label><br>
                    <textarea id="bookDescribe" class="form-control"></textarea>
                </div>
                <div class="form-group ">
                    <input type="button" value="提交" id="btnBook" class="btn btn-success" style="margin-right: 100px">
                    <input type="reset" class="btn" >
                </div>
            </form>
        </div>

    </div>
</div>
</body>
</html>